<template>
  <div class="tag-box">
    <span
      v-for="(item, index) in list"
      :key="index"
      :style="`color:${item.color}`"
      >{{ item.name }}</span
    >
  </div>
</template>

<script>
export default {
  props: {
    option: null,
    separator: {
      type: String,
      default: ",",
    },
  },
  data() {
    return {
      colorData: {
        地理: "#8B659D",
        物理: "#543EA4",
        生物: "#659D71",
        历史: "#A98C38",
        语文: "#3179BE",
        英语: "#A23571",
        数学: "#3E91A4",
        政治: "#AB5151",
        化学: "#65789D",
        日语: "#374A5F",
      },
    };
  },
  computed: {
    list: function () {
      if (this.option) {
        if (typeof this.option == "object") {
          return this.option.map((item) => {
            return {
              name: item,
              color: this.colorData[item] ? this.colorData[item] : "#409eff",
            };
          });
        } else if (typeof this.option == "string") {
          return this.option
            .split(this.separator)
            .filter((item) => {
              return item;
            })
            .map((item) => {
              return {
                name: item,
                color: this.colorData[item] ? this.colorData[item] : "#409eff",
              };
            });
        }
      } else {
        return [{ name: "-", color: "#409eff" }];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.tag-box {
  display: inline-block;
  span {
    margin: 5px;
    font-weight: bold;
  }
}
</style>